
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>P166 列表的增删和移动</title>
    <style>
      body{background:#ddd;text-align:center}
      .list{display:inline-block;margin-top:20px;padding:40px;border-radius:8px;background:#fff;color:#333;text-align:left;font-size:13px}
      .list-ul{list-style:none;margin:0;padding:0}
      .list-option{padding:6px 0;}
      .list-input{width:300px;border:1px solid #ccc;padding:4px;font-size:14px;color:#333}
      .list-input:hover{background:#effaff}
      .list-btn span{color:#0065A0;;cursor:pointer}
      .list-btn span:hover{text-decoration:underline}
      .list-btn b{text-align:center;background-color:#D6EDFF;border-radius:6px;width:20px;height:20px;display:inline-block;margin:0 2px;cursor:pointer;color:#238FCE;border:1px solid #B3DBF8;float:left}
      .list-bottom{margin-top:5px}
      .list-add-show{color:#f60;cursor:pointer}
      .list-add-show:before{position:relative;top:1px;margin-right:5px;content:"+";font-weight:700;font-size:16px;font-family:arial}
      .list-add-show span:hover{text-decoration:underline}
      .list-add-area{margin-top:5px}
      .list-add-add{cursor:pointer;margin-left:5px}
      .list-add-cancel{cursor:pointer;margin-left:4px}
      .list-add-input{width:180px;border:1px solid #ccc;padding:4px;font-size:14px;color:#333}
      .list-add-input:hover{background:#effaff}
      .list-tmp{display:none}
      .list-hide{display:none}
    </style>
  </head>
  <body>
    <form>
      <div class="list">
        <ul class="list-ul">
          <li class="list-option">
            <input class="list-input" type="text" name="list[]">
            <span class="list-btn">
              <span class="list-up">[上移]</span>
              <span class="list-down">[下移]</span>
              <span class="list-del">[删除]</span>
            </span>
          </li>
        </ul>
        <div class="list-bottom">
          <span class="list-add-show"><span>添加项目</span></span>
          <div class="list-add-area list-hide">
            添加到列表：
            <input class="list-add-input" type="text" name="list[]">
            <input class="list-add-add" type="button" value="添加">
            <input class="list-add-cancel" type="button" value="取消">
          </div>
        </div>
      </div>
    </form>
    <script>
        (function(window) {
            var SmartList = function(prefix, defList) {
                Find.prototype.prefix = prefix;
                var find = new Find(document.getElementsByClassName(prefix)[0]);
                var list = new List(find.className('option'));
                for (var i in defList) {
                    list.add(defList[i]);
            }
            var add = {
            'show': find.className('add-show'),
            'area': find.className('add-area'),
            'input': find.className('add-input'),
            'add': find.className('add-add'),
            'cancel': find.className('add-cancel')
            };
            add.show.onclick = function() {
            add.area.classList.remove(prefix + '-hide');
            };
            add.add.onclick = function() {
            list.add(add.input.value);
            };
            add.cancel.onclick = function() {
            add.area.classList.add(prefix + '-hide');
            };
        };
        function List(tmp) {
            this.tmp = tmp;
            this.obj = tmp.parentNode;
            this.obj.removeChild(tmp);
        }
        List.prototype = {
            add: function(value) {
                var tmp = this.tmp.cloneNode(true);
                var find = new Find(tmp);
                find.className('input').value = value;
                var obj = this.obj;
                find.className('up').onclick = function() {
                    var prev = find.prev();
                    if (prev) {
                        obj.insertBefore(tmp, prev);
                    } else {
                        alert('已经是第1个');
                }
            };
        find.className('down').onclick = function() {
            var next = find.next();
            if (next) {
                obj.insertBefore(next, tmp);
            } else {
                alert('已经是最后1个');
            }
        };
        find.className('del').onclick = function() {
            if (confirm('您确定要删除？')) {
            obj.removeChild(tmp);
            }
        };
        this.obj.appendChild(tmp);
    }
  };
        function Find(obj) {
            this.obj = obj;
        }
        Find.prototype = {
        prefix: '',
        className: function(className) {
            return this.obj.getElementsByClassName(this.prefix + '-' + className)[0];
        },
        prev: function() {
            var node = this.obj.previousSibling;
            while(node) {
            if (node.nodeType === Node.ELEMENT_NODE) {
                break;
            }
            node = node.previousSibling;
        }
        return node;
        },
        next: function() {
            var node = this.obj.nextSibling;
            while(node) {
                if (node.nodeType === Node.ELEMENT_NODE) {
                    break;
                }
            node = node.nextSibling;
            }
            return node;
        }
    };
    window['SmartList'] = SmartList;
    })(window);
    </script>
    <script>
      SmartList('list', ['PHP', 'JavaScript']);
    </script>
  </body>
</html>